<!-- 我的弹窗 -->

<template>
  <WebModal huge>
    <WebForm class="UserRole-MyModal">
      <EasyRow>
        <FormInput label="角色名称" bind="name" :max="20" fifth3 required />
        <FormRadio label="角色身份" bind="roleType" :dict="DICT.ROLE_TYPE" fifth2 required @change="changeType" />
      </EasyRow>

      <FormTextarea label="角色描述" bind="describe" :rows="2" :max="20" />

      <EasyRow flex>
        <MyRegion />
        <MyWeb />
        <MyLogistics />
        <MyStaff />
        <MyDashboard />
      </EasyRow>
    </WebForm>
  </WebModal>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyModal',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 超级管理员角色按钮
     */
    adminRoleBtn() {
      return this.DICT.ROLE_BTN.map(([id]) => id)
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听单项
     */
    one: {
      immediate: true,
      handler({ roleType }) {
        if (roleType === 2) this.changeType()
      },
    },

    /**
     * 监听管理端开关
     */
    'one.rolePlatformWeb': {
      immediate: true,
      handler() {
        this.changeSwitch()
      },
    },

    /**
     * 监听后勤端开关
     */
    'one.rolePlatformLogistics': {
      immediate: true,
      handler() {
        this.changeSwitch()
      },
    },

    /**
     * 监听员工端开关
     */
    'one.rolePlatformStaff': {
      immediate: true,
      handler() {
        this.changeSwitch()
      },
    },

    /**
     * 监听大屏端开关
     */
    'one.rolePlatformDashboard': {
      immediate: true,
      handler() {
        this.changeSwitch()
      },
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换身份
     */
    changeType() {
      const auth = this.one.roleType === 1 ? 2 : 1
      CORE.merge(this.one, {
        rolePlatformWeb: auth,
        rolePlatformLogistics: auth,
        rolePlatformStaff: auth,
        rolePlatformDashboard: auth,
        roleBtn: this.adminRoleBtn,
      })
    },

    /**
     * 切换开关
     */
    changeSwitch() {
      const {
        rolePlatformWeb: web,
        rolePlatformLogistics: app,
        rolePlatformStaff: user,
        rolePlatformDashboard: dashboard,
      } = this.one
      const allFlase = web !== 1 && app !== 1 && user !== 1 && dashboard !== 1
      this.one.authReady = allFlase ? '' : 'ready'
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
